import { useState, useEffect } from 'react'
import { Input, Button, Popconfirm } from 'tdesign-react'
import Empty from '@/components/Empty'
// import { useLanguage, useRefresh } from '@/stores'
import { useTranslation } from 'react-i18next'

import './index.less'

const Todo = () => {

  const { t } = useTranslation(['bugManager'])
  // const hisToryFinishRefresher = useRefresh('historyFinish')

  const [todoText, setTodoText] = useState<string>('')
  const [todoTextStatus, setTodoTextStatus] = useState<InputStatus>('default')
  const [todoList, setTodoList] = useState<any[]>([])

  useEffect(() => {
    setTodoList(JSON.parse(localStorage.getItem('_todoList') || '[]'))
  }, [])

  const todoInputOnChange = (value: string) => {
    setTodoText(value)
    if (value) {
      setTodoTextStatus('default')
    }
  }

  const addTodoItem = () => {
    if (!todoText) {
      setTodoTextStatus('error')
      return
    } else {
      let todoListString = localStorage.getItem('_todoList') || '[]'
      let _todoList = JSON.parse(todoListString)
      _todoList.push({
        text: todoText,
        status: 'todo',
        id: new Date().getTime()
      })
      setTodoList(_todoList)
      localStorage.setItem('_todoList', JSON.stringify(_todoList))
      localStorage.setItem('createTodoNumber', (parseInt(localStorage.getItem('createTodoNumber') || '0') + 1).toString())
      // hisToryFinishRefresher.shouldRefresh()
    }
  }

  const finishTodo = (item: any) => {
    let _todoList = [...todoList]
    for (let i = 0; i < _todoList.length; i++) {
      if (_todoList[i].id == item.id) {
        _todoList[i].status = 'finish'
        break
      }
    }
    setTodoList(_todoList)
    localStorage.setItem('_todoList', JSON.stringify(_todoList))
  }

  const deleteTodo = (item: any) => {

    let _todoList = [...todoList]
    for (let i = 0; i < _todoList.length; i++) {
      if (_todoList[i].id == item.id) {
        _todoList.splice(i, 1)
        break
      }
    }
    setTodoList(_todoList)
    localStorage.setItem('_todoList', JSON.stringify(_todoList))
  }

  return <div className='todo'>
    <div className='block-title'>{t('home.todoList.title')}</div>
    <div className='add-todo'>
      <Input
        className='add-todo-input'
        placeholder={t('home.todoList.inputPlaceholder')}
        status={todoTextStatus}
        tips={todoTextStatus == 'default' ? undefined : t('home.todoList.inputTips')}
        align='left'
        size='medium'
        type='text'
        value={todoText}
        onChange={todoInputOnChange}
      />
      <Button className='add-todo-icon' onClick={addTodoItem}>{t('home.todoList.addButton')}</Button>
    </div>
    <div className='todo-list'>
      {todoList.map((item: any) => {
        return <div className={`todo-item ${item.status == 'todo' ? 'todo' : 'finish'}`} key={item.id}>
          <div className='todo-item-text'>{item.text}</div>
          {item.status == 'todo' && <Button className='finish-button' onClick={() => { finishTodo(item) }}>{t('home.todoList.finishButton')}</Button>}
          {item.status == 'finish' &&
            <Popconfirm
              theme='danger'
              placement='left'
              content={t('home.todoList.deleteTitle')}
              cancelBtn={<Button className='cancel-button' theme='default'>{t('home.todoList.cancelButton')}</Button>}
              confirmBtn={<Button className='delete-button' theme='danger' onClick={() => { deleteTodo(item) }}>{t('home.todoList.deleteButton')}</Button>}
            >
              <Button className='delete-button' theme='danger'>{t('home.todoList.deleteButton')}</Button>
            </Popconfirm>
          }
        </div>
      })}
      {todoList.length == 0 && <Empty description={t('home.todoList.empty')} />}
    </div>
  </div>
}

export default Todo

type InputStatus = 'default' | 'error' | 'success' | 'warning' | undefined
